<template>
  <div class="background">
    <div class="_input">
      <div class="left-logo">
        <img style="width: 3vh;height: 3vh" src="@/static/logo.png" alt="PNG Icon">
        <div class="centered-text">论文云审核</div>
      </div>
      <div class="left-title">
        论文云审核 自动化论文审核工具
      </div>
      <div class="left-content">
        随着科研领域的不断扩展和深化，学术界和企业对高质量、可信赖的论文审核服务的需求不断增加。人工智能和自然语言处理技术越来越成熟，为自动化论文审核工具开发提供技术支持。如此市场背景，会议论文智能审核系统应运而生。
      </div>
      <div class="left-divider"></div> <!-- 分割线 -->
      <div class="left-pic">
        <img style="width: 18vw;height: 18vw;margin-left: 10vw" src="@/static/login_1.png" alt="PNG Icon">
        <img style="width: 18vw;height: 18vw;margin-left: 4vw" src="@/static/login_2.png" alt="PNG Icon">
      </div>
    </div>
    <div class="_output" v-show="!leftBig">
      <LoginView v-if="type===0" @changeType="changeType"/>
      <RegisterView v-else-if="type===1" @changeType="changeType"/>
      <ForgetPasswordView v-else @changeType="changeType"/>
    </div>
  </div>
</template>

<script>

import LoginView from "@/paper_review/view/start/LoginView";
import RegisterView from "@/paper_review/view/start/RegisterView";
import ForgetPasswordView from "@/paper_review/view/start/ForgetPasswordView";

export default {
  name: "StartView",
  components: {
    ForgetPasswordView,
    RegisterView,
    LoginView
  },
  data() {
    return {
      type: 0,
      leftWidth: 58,
      leftHeight: 98,
      leftBig: false,
    }
  },
  methods: {
    changeType(i) {
      this.type = i
    },
  },
};
</script>

<style lang="scss" scoped>
.zoomed {
  transform: scale(1.5); /* 根据需要调整缩放比例 */
  transition: transform 1s ease; /* 可选：添加过渡效果 */
}

.background {
  display: flex;
}

._input {
  width: 58vw;
  height: 98vh;
  background-color: #e5e9f3;
  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.2), /* 上边框阴影 */
  0 -4px 4px -2px rgba(0, 0, 0, 0.2), /* 下边框阴影 */
  4px 0 4px -2px rgba(0, 0, 0, 0.2), /* 左边框阴影 */
  -4px 0 4px -2px rgba(0, 0, 0, 0.2); /* 右边框阴影 */
  margin: 1vh 1vw 1vh 1vw;
  border-radius: 10px;
}

//获取焦点阴影变深
._input:hover {
  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.4), /* 上边框阴影 */
  0 -4px 4px -2px rgba(0, 0, 0, 0.4), /* 下边框阴影 */
  4px 0 4px -2px rgba(0, 0, 0, 0.4), /* 左边框阴影 */
  -4px 0 4px -2px rgba(0, 0, 0, 0.4); /* 右边框阴影 */
}

.left-logo {
  margin-left: 2vw;
  margin-top: 3vh;
  display: flex;
}

.centered-text {
  height: 3vh;
  align-items: center; /* 垂直居中 */
  font-weight: bold; /* 字体加粗 */
  font-size: 2vh;
}

.left-title {
  margin-top: 8vh;
  width: 100%;
  display: flex;
  font-size: 2vw;
  justify-content: center; /* 水平居中 */
}

.left-content {
  margin-top: 7vh;
  margin-left: 10vw;
  margin-right: 10vw;
  font-size: 1vw;
  color: #545b66;
  text-indent: 2em; /* 设置首行缩进，可以根据需要调整 */
  line-height: 3; /* 设置行间距，可以根据需要调整 */
}

.left-divider {
  position: absolute;
  left: 10vw;
  width: 40vw;
  top: 50%; /* 将分割线垂直居中 */
  height: 1px; /* 分割线的高度 */
  background-color: #c5ccdb; /* 分割线的颜色 */
  transform: translateY(-50%); /* 将分割线垂直居中 */
}

.left-pic {
  position: absolute;
  top: 55%;
  width: 40vw;
  display: flex;
}

._output {
  width: 39vw;
  height: 98vh;
  background-color: #f6f7fa;
  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.2), /* 上边框阴影 */
  0 -4px 4px -2px rgba(0, 0, 0, 0.2), /* 下边框阴影 */
  4px 0 4px -2px rgba(0, 0, 0, 0.2), /* 左边框阴影 */
  -4px 0 4px -2px rgba(0, 0, 0, 0.2); /* 右边框阴影 */
  margin: 1vh 1vw 1vh 0;
  border-radius: 10px;
}

._output:hover {
  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.4), /* 上边框阴影 */
  0 -4px 4px -2px rgba(0, 0, 0, 0.4), /* 下边框阴影 */
  4px 0 4px -2px rgba(0, 0, 0, 0.4), /* 左边框阴影 */
  -4px 0 4px -2px rgba(0, 0, 0, 0.4); /* 右边框阴影 */
}


</style>
